<template>
  <!--左侧菜单组件-->
  <div class="container">
    <!--
      router：是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
      unique-opened：是否只保持一个子菜单的展开
      default-active：默认选中展开的菜单
      default-openeds：当前打开的 sub-menu 的 index 的数组
      active-text-color：当前激活菜单的文字颜色（仅支持 hex 格式）
      collapse-transition：是否开启折叠动画
    -->
    <el-scrollbar max-height="92%">
      <el-menu
            router
            unique-opened
            :default-active="activePath"
            background-color="#28333E"
            text-color="#FFFFFFB3"
            :active-text-color="activeTextColor"
            :collapse="isCollapse"
            :collapse-transition="false"
            @select="saveNavState"
            style="border-right: none">

        <!--<el-menu-item index="/home">
          <i class="fa fa-home" style="margin-right: 15px"/>
          <template #title>主页</template>
        </el-menu-item>-->

        <template v-for="item in menuRoutes" :key="item.id">
          <template v-if="item.menuType == menuType.catalogue">
            <el-submenu :index="item.id" :disabled="item.enabled == enabledState.disabled">
              <template #title>
                <i :class="item.icon" style="margin-right: 15px"/>
                <span>{{item.title}}</span>
              </template>
              <!--子菜单-->
              <el-menu-item
                      v-for="lower in item.children"
                      :key="lower.id"
                      :index="lower.path"
                      :disabled="lower.enabled === enabledState.disabled">
                <template #title>
                  <i :class="lower.icon" style="margin-right: 15px"/>
                  <span>{{ lower.title }}</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </template>
          <template v-else-if="item.menuType == menuType.menu">
            <el-menu-item :index="item.path" :disabled="item.enabled === enabledState.disabled">
              <i :class="item.icon" style="margin-right: 15px"/>
              <template #title>{{ item.title }}</template>
            </el-menu-item>
          </template>
        </template>
    </el-menu>
      <!--<transition name="slide-fade">
        <el-empty v-if="!menuRoutes.length" :image-size="isCollapse ? 25 : 70" :description="isCollapse ? 'empty' : 'empty'"></el-empty>
      </transition>-->
    </el-scrollbar>
  </div>
</template>

<script>
  import constants from '@/config/constants/systemConstants';

  export default {
    name: "AsideMenu",
    data() {
      return {
        enabledState: {
          enabled: constants.enabled,
          disabled: constants.disabled
        },
        menuType: {
          //目录
          catalogue: constants.menuType.catalogue,
          //菜单
          menu: constants.menuType.menu,
          //按钮
          button: constants.menuType.button
        },
        //是否左右收起菜单
        isCollapse: false,
      }
    },
    methods: {
      //保存用户点击菜单的状态
      saveNavState(index, indexPath){
        window.sessionStorage.setItem('activePath', index);
      },
    },
    computed: {
      //获取vuex中菜单数据 用于菜单遍历
      menuRoutes() {
        return this.$store.state.menuRoutes || [];
      },

      activePath(){
        return window.sessionStorage.getItem('activePath') || '/';
      },
    },
    props: {
      activeTextColor: {
        type:String,
        default:() => {return ''},
        required: false
      }
    }
  }
</script>

<style scoped>
  .container {
    overflow: hidden;
    background-color: #28333E;
    box-sizing: border-box;
  }

  /* 可以设置不同的进入和离开动画 */
  /* 设置持续时间和动画函数 */
  .slide-fade-enter-active {
    transition: all .3s ease;
  }
  .slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
  }
</style>
